<template>
  <main>
    <div class="main">
      <div class="page page-one"> 
        <div class="page-one-h1">
          <h1>EPISODES</h1>
          <h1>EPISODES</h1>
        </div>
        <div class="page-one-information">
          <ul>
            <li>
              <h1 class="page-one-information-h1">Nice to meet you!</h1>
              <p class="page-one-information-p">{{ safeUsername }}</p>
              <p class="page-one-information-span">
                <span>I'm a <a href="#">full stack developer</a> with over 5 years of experience.</span>
                <span>
                  Proficient in <a href="#">Python</a>, <a href="#">Shell</a>, <a href="#">JavaScript</a>, <a href="#">TypeScript</a> familiar with SpringBoot
                  SpringCloud microservice framework, familiar with Dockerfile/YAML file writing, dimension
                  OBSBOT - Connecting You to the Future
                  [Official],Version control, personal experience with full-stack development, <a href="#">Nuxt3</a> + <a href="#">django</a>
                  Independently.
                </span>
              </p>
            </li>
            <li>
              <button class="page-one-information-btn">
                <a href="#">Let't talk with me</a>
                <el-icon style="top: 3px;"><Right /></el-icon>
              </button>
              <button class="page-one-information-btn">
                <a href="#">DownLoad</a>
                <el-icon style="top: 2px;"><Download /></el-icon>
              </button>
            </li>
          </ul>
        </div>
        <div class="page_user">
          <img src="/images/user/image.webp">
        </div>
      </div>
      <!-- <div class="page">2</div> -->
    </div>
  </main>
</template>


<script lang="ts">
import { Right,Cellphone, Message,Download } from '@element-plus/icons-vue';
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import {useUserState} from '@/states/pinia'
gsap.registerPlugin(ScrollTrigger) 

export default defineComponent({
  components: {
    Right,
    Cellphone,
    Message,
    Download
  },
  async setup() {

    const data = reactive({
      timer: ref(),
    })

    const State = useUserState()
    



    // 防抖函数，防止执行多次函数
    const debounce = (func: { (): void; apply?: any; }, delay: number | undefined) => {
      data.timer = null;
      return () => {
          clearTimeout(data.timer);
          data.timer = setTimeout(() => {
              func.apply(this, arguments);
          }, delay);
      };
    }


    const scrollX = async() => {
      const container = document.querySelector('.main')
      if(container){
        container.addEventListener('wheel',
          (event) => {
            event.preventDefault()
            container.scrollLeft += event.deltaY;
            if(container.scrollLeft > 0){
              gsap.to('.header', {duration: 0.5, ease: 'power1.out', x: -120})
            }
            else {
              gsap.to('.header', {duration: 0.5, ease: 'power1.in', x: 0})
            }
          }
        )
      }
    }


    const divCenter = async() => {
      const pages = document.querySelectorAll(".page-one div");
      const middle = Math.floor(window.innerWidth / 2); // 计算屏幕中间位置

      pages.forEach(page => {
        const rect = page.getBoundingClientRect();
        const pageMiddle = rect.left + (rect.width / 2); // 计算每个div的中心位置

        if (pageMiddle > middle - 50 && pageMiddle < middle + 50) {
          page.classList.add("active");
        } else {
          page.classList.remove("active");
        }
      });
    }

    const GSAP = async() => {
      gsap.fromTo('.page-one-information-p', {
        opacity: 0,
        fontSize: 0,
      },
      {
        opacity: 1,
        fontSize: '80px',
        duration: 1,
        ease: 'power2.out',
      })

      gsap.fromTo('.page-one-information-h1', {
        opacity: 0,
        y: -100,
      },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: 'power2.out',
      })

      gsap.fromTo('.page-one-information-span', {
        opacity: 0,
        y: 100,
      },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: 'power2.out',
      })

      gsap.fromTo('.page-one-information-btn',
      {duration: 0.3, opacity: 0, y: 100, stagger: 0.3, ease: 'power2'}
      ,{
        opacity: 1,

      })

      gsap.fromTo('.page_user',
      {
        opacity: 0,
        x: 100,
        duration: 0.2,
      }
      ,{
        opacity: 1,
        x: 0,
        duration: 1,
        ease: 'power2',
      })

    }

    const safeUsername = computed(() => {
      return State.userinfo?.username || '未登录';
    });


    onMounted(() => {
      GSAP()
      scrollX()
      divCenter()
      window.addEventListener('wheel', debounce(divCenter, 300))
    })




    return{
      ...toRefs(data),
      State,
      safeUsername
    }

  }
})


</script>


<style scoped>

* {
  text-decoration: none;
  color: black;
}

.main {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
}


.page {
  position : absolute;
	width : 100%;
	height : 100%;
  flex-shrink: 0;
  text-align: center;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  transition: transform 0.3s ease;
}

.page-one {
  display: flex;
  justify-content: spbace-between;
  align-items: center;
  overflow: hidden;
  transition: all 0.5s ease;
}

.page-one div {
  width: 624px;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.page-one div.active{
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.page-one-h1 {
  padding: 0;
  margin: 0;
  
}

.page-one-h1 h1 {
  display: flex;
  writing-mode: vertical-rl; /* 将文字竖直显示 */
  text-orientation: upright; /* 设置文字方向为正立 */
  font-size: 100px;
  text-align: center;
  margin-left: 29vh;
  margin-bottom: 30%;
  animation:  scroll1 9s linear infinite;
}


.page-one-information ul {
  display: flex;
  flex-direction: column;
  line-height: 10rem;
  margin-top: 10%;
}

.page-one-information ul li {
  width: calc(100% - 15px);
}


.page-one-information p:not(:last-child) {
  font-size: 80px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



.page-one-information-span {
  font-size: 15px;
  line-height: 40px;
  text-align: start;
  margin-left: 2rem;
}

.page-one-information-span a {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.page_user img{
  width: 100%;
  height: 100%;
  background-image: url('/images/user/image.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.9);
}



@keyframes scroll1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes animation1 {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }

}


</style>